<template>
    <zh-form ref="formRef" v-loading="data.loading" :model="data.formData" label-width="100px" :span="12" :rules="data.rules">
      <zh-form-select
          prop="datasourceId"
          label="默认数据源"
          :disabled="props.disabled"
          v-model="data.formData.datasourceId"
          :lazy="true"
          func-code="genDatasource0001"
          :fieldNames="{ label: 'connName', value: 'id' }"
          @change="changeDatasource"
      ></zh-form-select>
      <zh-form-input
          prop="prefixTable"
          label="去除表名前缀"
          :disabled="props.disabled"
          v-model="data.formData.prefixTable"
      ></zh-form-input>
      <zh-form-select
          prop="createType"
          label="生成类型"
          :disabled="props.disabled"
          :options="data.dictData.createTypeGen"
          v-model="data.formData.createType"
      ></zh-form-select>
      <zh-form-checkbox
          prop="createFuncList"
          label="生成功能"
          :disabled="props.disabled"
          :options="data.dictData.createFuncGen"
          v-model="data.formData.createFuncList"
      ></zh-form-checkbox>
      <zh-form-input
          prop="packageName"
          label="项目包名"
          :disabled="props.disabled"
          v-model="data.formData.packageName"
      ></zh-form-input>
      <zh-form-select
          prop="baseclassId"
          label="继承基类"
          :disabled="props.disabled"
          v-model="data.formData.baseclassId"
          :lazy="true"
          func-code="genBaseClass0001"
          :fieldNames="{ label: 'code', value: 'id' }"
          @change="changeBaseClass"
      ></zh-form-select>
      <zh-form-radio
          prop="generatorType"
          label="生成方式"
          :disabled="props.disabled"
          :options="data.dictData.generatorTypeGen"
          v-model="data.formData.generatorType"
      ></zh-form-radio>
      <zh-form-radio
          prop="permissionLevel"
          label="权限级别"
          :disabled="props.disabled"
          :options="data.dictData.permissionLevelGen"
          v-model="data.formData.permissionLevel"
      ></zh-form-radio>
      <zh-form-radio
          prop="formLayout"
          label="表单布局"
          type="number"
          :disabled="props.disabled"
          :options="data.dictData.formLayoutGen"
          v-model="data.formData.formLayout"
      ></zh-form-radio>
      <zh-form-radio
          prop="popType"
          label="弹窗类型"
          :disabled="props.disabled"
          :options="data.dictData.popTypeGen"
          v-model="data.formData.popType"
      ></zh-form-radio>
      <zh-form-input
          prop="author"
          label="作者"
          :disabled="props.disabled"
          v-model="data.formData.author"
      ></zh-form-input>
      <zh-form-input
          prop="version"
          label="项目版本号"
          :disabled="props.disabled"
          v-model="data.formData.version"
      ></zh-form-input>
      <zh-form-input
          prop="email"
          label="邮箱"
          :disabled="props.disabled"
          v-model="data.formData.email"
      ></zh-form-input>
      <zh-form-input
          prop="reqBaseUrl"
          label="请求基础"
          :disabled="props.disabled"
          v-model="data.formData.reqBaseUrl"
      ></zh-form-input>
      <zh-form-input
          prop="backendPath"
          label="后端生成路径"
          :disabled="props.disabled"
          v-model="data.formData.backendPath"
      ></zh-form-input>
      <zh-form-input
          prop="frontendPath"
          label="前端生成路径"
          :disabled="props.disabled"
          v-model="data.formData.frontendPath"
      ></zh-form-input>
      <zh-form-select
          prop="templateMode"
          label="模版名称"
          :disabled="props.disabled"
          :options="data.dictData.templateModeGen"
          v-model="data.formData.templateMode"
      ></zh-form-select>
      <zh-col :span="24">
        <el-divider> 默认树配置参数 </el-divider>
      </zh-col>
      <zh-form-select
          prop="dataSource"
          label="数据来源"
          :disabled="props.disabled"
          :options="data.dataSourceDict"
          v-model="data.formData.treeConfig.dataSource"
      ></zh-form-select>
      <zh-form-input
          prop="leftTitle"
          label="左侧标题"
          :disabled="props.disabled"
          v-model="data.formData.treeConfig.leftTitle"
      ></zh-form-input>
      <zh-form-input
          prop="dataSourceValue"
          :label="data.formData.treeConfig.dataSource==='2'?'接口地址':'表名'"
          :disabled="props.disabled"
          v-model="data.formData.treeConfig.dataSourceValue"
      ></zh-form-input>
      <zh-form-input
          prop="associationField"
          label="关联字段"
          :disabled="props.disabled"
          v-model="data.formData.associationField"
      ></zh-form-input>
      <zh-form-input
          prop="treeId"
          label="树id字段"
          :disabled="props.disabled"
          v-model="data.formData.treeConfig.treeId"
      ></zh-form-input>
      <zh-form-input
          prop="parentId"
          label="树父id字段"
          :disabled="props.disabled"
          v-model="data.formData.treeConfig.parentId"
      ></zh-form-input>
      <zh-form-input
          prop="title"
          label="显示实体字段"
          :disabled="props.disabled"
          v-model="data.formData.treeConfig.title"
      ></zh-form-input>
      <zh-col :span="24">
        <el-divider> 默认自定义配置参数 </el-divider>
      </zh-col>
      <zh-col :span="24">
        <zh-table type="default" ref="optionsTable" :toolbarConfig="props.disabled?{}:data.toolbarConfig" @toolbarButtonClick="optionsToolbarButtonClick" height="300px" size="mini" :columns="data.optionsColumns" highlight-current-row :data="data.formData.optionsConfig">
          <template #operate="{ row }">
            <zh-button  plain size="small" color="#F56C6C" :disabled="props.disabled" @click="deleteOptionsData(row)">删除</zh-button>
          </template>
          <template #fieldCode_edit="{ row }">
            <span v-if="props.disabled">{{row.fieldCode}}</span>
            <zh-input v-else v-model="row.fieldCode" />
          </template>
          <template #fieldName_edit="{ row }">
            <span v-if="props.disabled">{{row.fieldName}}</span>
            <zh-input v-else v-model="row.fieldName" />
          </template>
          <template #fieldValue_edit="{ row }">
            <span v-if="props.disabled">{{row.fieldValue}}</span>
            <zh-input v-else  v-model="row.fieldValue" />
          </template>
        </zh-table>
      </zh-col>
    </zh-form>
</template>

<script lang="ts" setup name="genUserConfigForm">
import { ElMessage } from 'element-plus';

//------------------定义子组件---------------------------
const formRef = ref();
//------------------接收传入参数(组件)-------------------
const props = defineProps({
  id: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: true,
  },
  btnLoding: Boolean,
});
const emits = defineEmits(['update:btnLoding', 'canner', 'refreshTable']);
let optionsTable = ref();
//------------------初始化------------------------------
onMounted(() => {
  getDict();
  getDetail();
});
//------------------内部变量定义-------------------------
const data = reactive({
  formData: {treeConfig:{},optionsConfig:[]} as any,
  detailVisible: true,
  loading: false,
  rules: {
    datasourceId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	  author: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    backendMode: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    frontendMode: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    generatorType:[{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    createType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    createFunc: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    formLayout: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    permissionLevel: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    popType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  },
  dataSourceDict:[{dictKey:'1',dictValue:'数据库表'},{dictKey:'2',dictValue:'数据接口'}],
  toolbarConfig: {
    buttons: [
      { name: '新增', code: 'myAdd', status: 'primary' },
    ],
    custom: true,
  },
  dictData: {} as any,
  areaCodeDict: [] as any,
  optionsColumns: [
    {
      type: 'seq',
      width: 60,
      fixed: 'left',
      align: 'center',
      title: '序号',
    },
    {
      field: 'fieldCode',
      title: '字段',
      visible: true,
      align: 'center',
      minWidth: 150,
      slots: {
        // 使用插槽模板渲染
        default: 'fieldCode_edit',
      },
    },
    {
      field: 'fieldName',
      title: '字段名称',
      visible: true,
      align: 'center',
      minWidth: 150,
      slots: {
        // 使用插槽模板渲染
        default: 'fieldName_edit',
      },
    },
    {
      field: 'fieldValue',
      title: '字段值',
      visible: true,
      align: 'center',
      minWidth: 300,
      slots: {
        // 使用插槽模板渲染
        default: 'fieldValue_edit',
      },
    },
    {
      field: 'operate',
      title: '操作',
      fixed: 'right',
      align: 'center',
      width: 210,
      slots: {
        // 使用插槽模板渲染
        default: 'operate',
      },
    },
  ]
});

// 查询数据字典信息
const getDict = () => {
  const params = {} as any;
  params.dictFields = 'createTypeGen,createFuncGen,permissionLevelGen,formLayoutGen,popTypeGen,generatorTypeGen,templateModeGen';
  $api.common.getBatchDict.post(params).then((res) => {
    data.dictData = res.result;
  });
};
const optionsToolbarButtonClick =(params)=> {
   if(params.code==='myAdd'){
    let list=[];
    if(data.formData.optionsConfig){
      list=data.formData.optionsConfig;
    }
    list.push({
       index:list.length,
    })
    data.formData.optionsConfig=list;
   }
}
const deleteOptionsData = (row) => {
  let list=[];
  if(data.formData.optionsConfig){
    list=data.formData.optionsConfig;
  }

  let newList=[];
  let i=0;
  list.forEach(element => {
    if(element.index!==row.index){
      element.index=i;
      newList.push(element);
      i++;
     
    }
  });
  data.formData.optionsConfig=newList;
}
const changeDatasource = (val,options) => {
  if (val) {
    data.formData.connName = options.connName;
  }else{
    data.formData.connName = '';
  }
};
const changeBaseClass = (val,options) => {
  if (val) {
    data.formData.baseClassCode = options.code;
  }else{
    data.formData.baseClassCode = '';
  }
};
//获取详情
const getDetail = () => {
  data.loading = true;
  $api.common.send
  .post('genUserConfig0002', { id: props.id })
  .then((res: any) => {
    let result=res.result || {};
    if(!result.treeConfig){
      result.treeConfig={treeId:'id',parentId:'parentId',title:'title',dataSource:'1',dataSourceValue:'',leftTitle:'',associationField:''};
    }
    if(!result.optionsConfig){
      result.optionsConfig=[]
    }else{
      let i=0;
      result.optionsConfig.forEach(element => {
        element.index=i;
        i++;
      });
    }
    if(!result.createFuncList){
      result.createFuncList=[]
    }
    
    data.formData = result
    data.loading = false;
  })
  .catch(() => {
    data.loading = false;
  });
};

//保存
async function save() {
  let checkFlag = await formRef.value.checkForm();
  if (checkFlag) {
    emits('update:btnLoding', true);
    if (data.formData.id) {
      $api.common.send
      .post('genUserConfig0005', data.formData)
      .then(() => {
        ElMessage.success('修改成功');
        emits('update:btnLoding', false);
        emits('canner', (data.detailVisible = false));
        emits('refreshTable');
      })
      .catch(() => {
        emits('update:btnLoding', false);
        emits('canner', (data.detailVisible = true));
      });
    } else {
      $api.common.send
      .post('genUserConfig0004', data.formData)
      .then(() => {
        ElMessage.success('新增成功');
        emits('update:btnLoding', false);
        emits('canner', (data.detailVisible = false));
        emits('refreshTable');
      })
      .catch(() => {
        emits('update:btnLoding', false);
        emits('canner', (data.detailVisible = true));
      });
    }
  }
}

//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ save });
</script>
<style lang="scss" scoped></style>
